<template>
  <div class="admin-index">
    <el-container>
      <el-aside class="aside">
        <el-menu :default-active="currentMenu" router @select="handleSelect">
          <el-menu-item index="/">
            <div class="header-menu">
              <el-avatar class="logo" src="/favicon.png" />
              <el-link>华夏交友圈</el-link>
            </div>
          </el-menu-item>
          <el-menu-item index="/admin/dashboard">
            <el-icon><location /></el-icon>
            <span>网站概览</span>
          </el-menu-item>
          <el-menu-item index="/admin/tag-manager">
            <el-icon><location /></el-icon>
            <span>板块管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/post-manager">
            <el-icon><location /></el-icon>
            <span>帖子管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/user-manager">
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/system-manager">
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/about">
            <el-icon><location /></el-icon>
            <span>关于</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <x-footer></x-footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { useStore } from "vuex";

const route = useRoute();
const store = useStore();
const currentMenu = ref(store.getters.currentMenu);
const handleSelect = (index) => {
  store.commit("setCurrentMenu", index);
};
if (route.fullPath !== store.getters.currentMenu) {
  store.commit("setCurrentMenu", route.fullPath);
  currentMenu.value = route.fullPath;
}
</script>

<style scoped>
.aside {
  width: 200px;
  height: 100vh;
  background-color: white;
}
.header-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
</style>
